/**
* 富文本编辑
*/ 
<template>
  <div>
    <div id="editor" class="editor"></div>
  </div>
</template>
<script>
import Editor from "wangeditor";
export default {
  name: "editor",
  //子组件访问父组件数据的唯一接口
  props: {
    textContent: { type: String }, //文本内容
    forbidden: { type: Boolean, default: true }, //是否禁用
  },
  data() {
    return {
      editor: "",
    };
  },
  //通过watch来监听message是否改变
  watch: {},
  // 创建完毕状态(里面是操作)
  created() {},
  mounted() {
    this.initEditor();
  },
  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    initEditor() {
      this.editor = new Editor("#editor"); /* 括号里面的对应的是html里div的id */
      // this.editor.$textElem.attr('contenteditable', false);

      /* 配置菜单栏 */
    //   this.editor.customConfig.menu = [
    //     "head", // 标题
    //     "bold", // 粗体
    //     "fontSize", // 字号
    //     "fontName", // 字体
    //     "italic", // 斜体
    //     "underline", // 下划线
    //     "strikeThrough", // 删除线
    //     "foreColor", // 文字颜色
    //     "backColor", // 背景颜色
    //     "link", // 插入链接
    //     "justify", // 对齐方式
    //     "quote", // 引用
    //     "image", // 插入图片
    //     "undo", // 撤销
    //     "redo", // 重复
    //   ];
      this.editor.customConfig = {
        menus: [
          "head", // 标题
        "bold", // 粗体
        "fontSize", // 字号
        "fontName", // 字体
        "italic", // 斜体
        "underline", // 下划线
        "strikeThrough", // 删除线
        "foreColor", // 文字颜色
        "backColor", // 背景颜色
        "link", // 插入链接
        "justify", // 对齐方式
        "quote", // 引用
        "image", // 插入图片
        "undo", // 撤销
        "redo", // 重复
        ],
      };
      this.editor.customConfig.uploadImgMaxLength = 5; // 限制一次最多上传 5 张图片 */
      this.editor.customConfig.uploadImgMaxSize =
        3 *
        1024 *
        1024; /* 将图片大小限制为 3M 默认为5M /
            /* 自定义图片上传（支持跨域和非跨域上传，简单操作）*/
      this.editor.customConfig.customUploadImg = async (files, insert) => {
        /* files 是 input 中选中的文件列表 */
        let formData = new FormData();
        formData.append("file", files[0]);
        /* 调用后台提供的上传图片的接口 */

        let tData = {
          action: "admin/common/upload",
          headers: this.abdpConfig.getApiFrom(),
          data: formData,
        };

        this.abdpAjax.http(tData).then((rsp) => {
          if (rsp.data.code == 200) {
            /* insert 是编辑器自带的 获取图片 url 后，插入到编辑器的方法 上传代码返回结果之后，将图片插入到编辑器中*/
            insert(rsp.data.data);
          } else {
            this.$message.error(rsp.data.msg);
          }
        });
      };
      this.editor.customConfig.onchange = (html) => {
        // console.log("html内容");
        // console.log(html) /* html 即变化之后的内容 */
        this.$emit("getTextContent", html);
      };

      this.editor.create(); /* 创建编辑器 */
      this.editor.$textElem.attr("contenteditable", this.forbidden); //禁用富文本
      this.editor.txt.html(this.textContent); /* 默认显示内容-回显 */
    },
  },
};
</script>
<style lang="less">
	#editor {
		.w-e-text-container {
			// 文本框里面的层级调低
			z-index: 1 !important;
		}
		.w-e-toolbar {
			// 给工具栏换行
			flex-wrap: wrap;

		}
		.w-e-menu {
			// 最重要的一句代码
			z-index: auto !important;

			.w-e-droplist {
				// 触发工具栏后的显示框调高
				z-index: 2 !important;
			}
		}
	}
</style>